<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DQ鞋店</title>

    <!-- 使用CDN引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

    <!-- 使用CDN引入Font Awesome CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">

    <style>
        .color-bar {
            width: 4px;
            position: absolute;
            top: 10%;
            height: 120px;
            left: 0px;
            background-color: rgb(197, 197, 197);
        }
    </style>
    <style>
        body {
            padding-top: 75px;
            font-family: '微软雅黑', sans-serif;
            background-color: #fff;
            width: 1500px;
        }

        nav {
            height: 75px;
        }

        .sidebar {
            padding: 30px;
            position: -webkit-sticky;
            position: sticky;
            /* width: 300px; */
            top: 75px;
            height: calc(100vh - 75px);
            border-right: 1px solid #ddd;
            z-index: 0;
            /* border-radius: 20px 20px 20px 20px; */
        }

        .row-top {
            position: -webkit-sticky;
            position: sticky;
            top: 75px;
            padding: 15px 50px;
            padding-bottom: 15px;
            /* padding-left: 130px; */
            /* border: 1px solid #ddd; */
            z-index: 1;
            /* border-radius: 20px; */
            /* background-color: white; */
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 90%, rgba(255, 255, 255, 0));
        }

        .content {
            background-color: white;
        }

        .shoe-card {
            border: 1px solid #ddd;
            padding: 30px 40px;
            width: 300px;
            /* height: 490px; */
            /* padding: 10px; */
            margin-bottom: 50px;
            margin-left: 120px;
            border-radius: 20px;
            overflow: hidden;
        }

        .shoe-card h6 {
            color: rgb(155, 155, 155);
        }

        .shoe-card h5 {
            margin-top: 5px;
            font-weight: bold;
        }

        .shoe-img {
            width: 100%;
            height: 250px;
            margin: 15px 0;
            border-radius: 20px;
        }

        .price-container span {
            margin-left: 5px;
            color: rgb(181, 182, 184);
        }

        .details {
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
            align-items: center;
        }

        .small-image {
            width: 55px;
            /* 调整小图尺寸 */
            height: 55px;
            margin: 0 5px;
            margin: 8px;
            border: 1px solid #ddd;
            border-radius: 10px;
        }

        #shoeGrid {
            z-index: 0;
            padding-left: 50px;
            padding: 10px;
        }

        .checkbox {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin: 5px;
            text-align: center;
            line-height: 35px;
            border: 1px solid #ccc;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        .checkbox.selected {
            background-color: rgb(63, 184, 175);
            color: #fff;
        }

        .noUi-handle {
            cursor: pointer;
        }

        .custom-control-label {
            cursor: pointer;
        }

        /* 添加一些样式以使滑块更易于看到 */
        #price-range {
            width: 80%;
            margin: 20px auto;
            position: relative;
        }

        #range-slider {
            width: 100%;
            height: 10px;
            margin-top: 20px;
        }

        #thumb-1,
        #thumb-2 {
            width: 20px;
            height: 20px;
            background-color: #3498db;
            border: 1px solid #3498db;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        #thumb-1 {
            left: 0;
        }

        #thumb-2 {
            right: 0;
        }

        /* 触发弹窗图片的样式 */
        img {
            cursor: pointer;
        }

        /* 弹窗的位置和背景颜色 */
        .modal {
            display: none;
            position: fixed;
            /* 绝对定位 */
            z-index: 1;
            /* 元素置前 */
            padding-top: 50px;
            width: 100%;
            height: 100%;
            overflow: auto;
            /* 溢出出现滚动条 */
        }

        /* 弹窗图片的大小 */
        .content1 {
            margin: auto;
            display: block;
            min-height: 500px;
            max-height: 600px;
        }
    </style>
</head>

<body>
<!-- 顶栏 -->
<nav class="navbar navbar-expand border-bottom navbar-light bg-white fixed-top">
    <a class="navbar-brand font-weight-bold" href="">DQ鞋店</a>
    <form class="form-inline" style="width: 100%">
        <div class="input-group" style="width: 100%;float: right;margin-left: 400px;">
            <div class="input-group-prepend">
                    <span class="input-group-text bg-white"
                          style="border-radius: 20px 0 0 20px;border-right: 0;padding-left: 20px;">
                        <i class="fas fa-search fa-lg text-dark"></i>
                    </span>
            </div>
            <input class="form-control form-control-lg" style="border-radius: 0 20px 20px 0;border-left: 0"
                   type="search" placeholder="搜索鞋名或品牌名" aria-label="搜索">
        </div>
    </form>
</nav>

<div class="container-fluid">
    <div class="row">
        <!-- 左侧栏 -->
        <div class="col-md-3 sidebar">
            <h5 style="margin-bottom: 5px; cursor: pointer;" id="category-header"
                class="font-weight-bold d-flex justify-content-between align-items-center">
                分类
                <i id="category-icon" class="fas fa-caret-up"></i>
            </h5>
            <hr>
            <div class="form-group">
                <div id="category-checkbox" style="margin-left: 20px;font-weight:450;">
                    <!-- 鞋子种类多选框将在这里生成 -->
                </div>
            </div>
            <hr id="category-checkbox-hr">
            <h5 class="font-weight-bold" style="margin-top: 30px;margin-bottom: 20px;">价格范围</h5>
            <div class="d-flex justify-content-center align-items-center">
                <!-- <span class="font-weight-bold" id="min-value"></span>
                <span class="font-weight-bold">~</span>
                <span class="font-weight-bold" id="max-value"></span> -->
                <sb></sb>
            </div>
            <div id="price-range" class="mb-3" style="margin-top: 20px;margin-bottom: 10px;"></div>
            <h5 class="font-weight-bold" style="margin-top: 40px;">尺码</h5>
            <hr>
            <div id="size-grid-checkbox" style="padding: 10px 20px;text-align: center;">
                <!-- 尺码选择格子将在这里生成 -->
            </div>
            <hr>
        </div>

        <!-- 右侧内容展示区 -->
        <div class="col-md-9 content">
            <div class="row row-top">
                <div class="col-md-12 d-flex justify-content-between align-items-center p-3">
                    <h4 class="mb-0 font-weight-bold">商品列表</h4>
                    <div class="dropdown">
                        <button class="btn btn-secondary text-dark bg-transparent border-0" type="button"
                                id="sortDropdown" data-bs-toggle="dropdown" aria-expanded="false"
                                style="font-weight: bold;">
                            选择排序方式
                        </button>
                        <i id="category-icon" class="fas fa-caret-down"></i>
                        <ul class="dropdown-menu" style="display: none;">
                            <li><a class="dropdown-item" href="#" data-sort="priceAsc">按价格升序</a></li>
                            <li><a class="dropdown-item" href="#" data-sort="sizeAsc">按鞋码升序</a></li>
                            <li><a class="dropdown-item" href="#" data-sort="brand">按品牌排序</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row" id="shoeGrid">
                <!-- 鞋子卡片将动态添加到这里 -->
            </div>
            <div id="noResultsMessage"
                 style="font-size: x-large;color: #8d8d8d;margin-top: 140px;margin-left: 42%;">未找到匹配结果</div>
        </div>
    </div>
</div>

<img loading="lazy" id="Img1" class="myImg" src="" onclick="demo('Img1')">
<!-- 弹窗 -->
<div id="myModal" class="modal" onclick="document.getElementById('myModal').style.display='none'">
    <!-- 弹窗内容 -->
    <img class="content1" id="img01">
</div>

<!-- <script src="./js/jquery-3.2.1.slim.min.js"></script> -->
<!-- <script src="./js/popper.min.js"></script> -->
<!-- <script src="./js/bootstrap.bundle.min.js"></script> -->
<!-- <script src="./js/nouislider.min.js"></script> -->

<script>

    const shoeData = [
        { id: 1, name: '运动鞋 1', category: '运动鞋', size: 49, price: 398, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 2, name: '拖鞋 1', category: '拖鞋', size: 48, price: 498, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 3, name: '休闲鞋 1', category: '休闲鞋', size: 47, price: 598, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 4, name: '童鞋 1', category: '童鞋', size: 46, price: 698, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 5, name: '运动鞋 2', category: '运动鞋', size: 39, price: 798, brand: 'Adidas阿迪达斯', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 6, name: '拖鞋 2', category: '拖鞋', size: 40, price: 898, brand: 'Adidas阿迪达斯', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 7, name: '休闲鞋 2', category: '休闲鞋', size: 41, price: 998, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 8, name: '童鞋 2', category: '童鞋', size: 42, price: 1098, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 9, name: '运动鞋 3', category: '运动鞋', size: 43, price: 1198, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 10, name: '拖鞋 3', category: '拖鞋', size: 44, price: 1298, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 11, name: '休闲鞋 3', category: '休闲鞋', size: 45, price: 1398, brand: 'Adidas阿迪达斯', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 12, name: '童鞋 3', category: '童鞋', size: 46, price: 1498, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 13, name: '运动鞋 4', category: '运动鞋', size: 47, price: 1598, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 14, name: '拖鞋 4', category: '拖鞋', size: 48, price: 1698, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 15, name: '休闲鞋 4', category: '休闲鞋', size: 49, price: 1798, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 16, name: '童鞋 4', category: '童鞋', size: 35, price: 198, brand: 'Adidas阿迪达斯', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 17, name: '运动鞋 5', category: '运动鞋', size: 36, price: 298, brand: 'Adidas阿迪达斯', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 18, name: '拖鞋 5', category: '拖鞋', size: 37, price: 398, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 19, name: '休闲鞋 5', category: '休闲鞋', size: 38, price: 498, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 20, name: '童鞋 5', category: '童鞋', size: 39, price: 598, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 21, name: '运动鞋 6', category: '运动鞋', size: 40, price: 698, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 22, name: '拖鞋 6', category: '拖鞋', size: 41, price: 798, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 23, name: '休闲鞋 6', category: '休闲鞋', size: 42, price: 898, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 24, name: '童鞋 6', category: '童鞋', size: 43, price: 989, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 25, name: '运动鞋 7', category: '运动鞋', size: 44, price: 1098, brand: 'NIKE耐克', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 26, name: '拖鞋 7', category: '拖鞋', size: 45, price: 1198, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
        { id: 27, name: '休闲鞋 7', category: '休闲鞋', size: 40, price: 1298, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002114256.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002302547.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224002334053.png' },
        { id: 28, name: '童鞋 7', category: '童鞋', size: 38, price: 398, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004144546.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004229060.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224004312571.png' },
        { id: 29, name: '运动鞋 8', category: '运动鞋', size: 37, price: 298, brand: 'ANTA安踏', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001352963.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001529300.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001601417.png' },
        { id: 30, name: '拖鞋 8', category: '拖鞋', size: 35, price: 198, brand: 'LI-NING李宁', image: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224000731683.png', leftSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001710619.png', rightSmallImage: 'https://danchar-oss.oss-cn-chengdu.aliyuncs.com/img/image-20231224001739099.png' },
    ];

    class Utils {
        static createE(elem, style, prep) {
            elem = document.createElement(elem);
            if (style) for (let prop in style) elem.style[prop] = style[prop];
            if (prep) for (let prop in prep) elem[prop] = prep[prop];
            return elem;
        }
        static appendTo(elem, parent) {
            if (parent.constructor === String) parent = document.querySelector(parent);
            parent.appendChild(elem);
        }
        static randomNum(min, max) {
            return Math.floor(Math.random * (max - min) + min);
        }
        static randomColor(alpha) {
            alpha = alpha || Math.random().toFixed(1);
            if (isNaN(alpha)) alpha = 1;
            if (alpha > 1) alpha = 1;
            if (alpha < 0) alpha = 0;
            let col = "rgba(";
            for (let i = 0; i < 3; i++) {
                col += Utils.randomNum(0, 256) + ",";
            }
            col += alpha + ")";
            return col;
        }
        static insertCss(select, styles) {
            if (document.styleSheets.length === 0) {
                let styleS = Utils.createE("style");
                Utils.appendTo(styleS, document.head);
            }
            let styleSheet = document.styleSheets[document.styleSheets.length - 1];
            let str = select + "{";
            for (var prop in styles) {
                str += prop.replace(/[A-Z]/g, function (item) {
                    return "-" + item.toLocaleLowerCase();
                }) + ":" + styles[prop] + ";";
            }
            str += "}"
            styleSheet.insertRule(str, styleSheet.cssRules.length);
        }
        static getIdElem(elem, obj) {
            if (elem.id) obj[elem.id] = elem;
            if (elem.children.length === 0) return obj;
            for (let i = 0; i < elem.children.length; i++) {
                Utils.getIdElem(elem.children[i], obj);
            }
        }
    }

    class Slide {
        static styleCss = false;
        //最小范围
        minNum = 0;
        //最大范围
        maxNum;
        //左边按钮的left值
        leftBtnLeft = 0;
        //右边按钮的left值
        rightBtnLeft = 238;

        // 新增获取价格范围的方法
        getPriceRange() {
            return [this.leftBtnLeft / (this.bgRange.clientWidth - 2) * this.maxNum, this.rightBtnLeft / (this.bgRange.clientWidth - 2) * this.maxNum];
        }

        // 新增过滤鞋子数据的方法
        filterShoes(shoeData) {
            const priceRange = this.getPriceRange();
            return shoeData.filter(shoe =>
                (priceRange[0] === 0 || shoe.price >= priceRange[0]) &&
                (priceRange[1] === this.maxNum || shoe.price <= priceRange[1])
            );
        }

        constructor(_max = 4000) {
            //最大值默认为4000
            this.maxNum = _max;
            this.elem = this.createElem();
        }
        createElem() {
            if (this.elem) return this.elem;
            //创建最外层容器
            let div = Utils.createE("div");
            div.className = "slideContainer";
            div.innerHTML = `<p class="priceTxt">Price<span id="rangeText">￥${this.minNum}~${this.maxNum}</span></p>
        <div class="rangeContainer" id="rangeContainer">
            <div class="bgRange" id="bgRange"></div>
            <div class="priceRange" id="priceRange"></div>
            <span id="leftBtn" class="leftBtn"></span>
            <span id="rightBtn" class="rightBtn"></span>
        </div>`;
            Utils.getIdElem(div, this);
            //设置样式
            Slide.setStyles();
            //给父元素监听mousedown事件
            this.rangeContainer.addEventListener("mousedown", e => this.mouseHandler(e))
            return div;
        }
        appendTo(parent) {
            Utils.appendTo(this.elem, parent);
        }
        mouseHandler(e) {
            //注意：getBoundingClientRect()返回的结果中，width height 都是包含border的
            let rect = this.rangeContainer.getBoundingClientRect();
            switch (e.type) {
                case "mousedown":
                    //取消鼠标快速拖动的默认事件
                    e.preventDefault();
                    this.x = e.offsetX;
                    this.btnType = e.target.id;
                    //如果点击的是背景条，执行rangeClick函数
                    if (/Range/.test(this.btnType)) {
                        e.stopPropagation();
                        //点击函数
                        this.rangeClick(e);
                        filterShoes(shoeData);
                        return;
                    }
                    //如果点击的是按钮，监听document鼠标移动事件
                    this.mouseHandlers = e => this.mouseHandler(e);
                    document.addEventListener("mousemove", this.mouseHandlers);
                    document.addEventListener("mouseup", this.mouseHandlers);
                    break;
                case "mousemove":
                    let x = e.clientX - rect.x - this.x;
                    //获取左右按钮的left值
                    this.leftBtnLeft = parseInt(getComputedStyle(this.leftBtn).left);
                    this.rightBtnLeft = parseInt(getComputedStyle(this.rightBtn).left);
                    if (this.btnType === "leftBtn") {
                        //确定左边按钮的取值范围
                        if (x < 0) x = 0;
                        if (x > this.rightBtnLeft) x = this.rightBtnLeft;
                        this.leftBtn.style.left = x + "px";
                    } else if (this.btnType === "rightBtn") {
                        //确定右边按钮的取值范围，减去1px边框
                        if (x < this.leftBtnLeft) x = this.leftBtnLeft;
                        if (x > this.bgRange.offsetWidth - 2) x = this.bgRange.offsetWidth - 2;
                        this.rightBtn.style.left = x + "px";
                    }
                    //文字范围显示
                    this.changeRangeText();
                    break;
                case "mouseup":
                    //移动事件监听
                    document.removeEventListener("mousemove", this.mouseHandlers);
                    document.removeEventListener("mouseup", this.mouseHandlers);
                    filterShoes(shoeData);
                    break;
            }
        }
        rangeClick(e) {
            //计算出鼠标点击位置的值
            let click_X = e.clientX - this.rangeContainer.getBoundingClientRect().x - this.leftBtn.offsetWidth / 2;
            //判断，如果当前点击的位置是在左边按钮的左侧、或者当左右按钮重叠时，点击的位置在按钮左侧，让左边按钮移动到鼠标点击的位置
            if (Math.abs(click_X - this.leftBtnLeft) < Math.abs(click_X - this.rightBtnLeft) ||
                (this.leftBtnLeft === this.rightBtnLeft && click_X < this.leftBtnLeft)) this.leftBtn.style.left = click_X + "px";
            //否则，让右边按钮移动到鼠标点击的位置
            else this.rightBtn.style.left = click_X + "px";
            //获取移动后的左右按钮的left值
            this.leftBtnLeft = parseInt(getComputedStyle(this.leftBtn).left);
            this.rightBtnLeft = parseInt(getComputedStyle(this.rightBtn).left);
            //文字范围显示
            this.changeRangeText();
        }
        changeRangeText() {
            //计算出最小范围与最大范围的值，四舍五入
            let minTxt = Math.round(this.leftBtnLeft / (this.bgRange.clientWidth - 2) * this.maxNum);
            let maxTxt = Math.round(this.rightBtnLeft / (this.bgRange.clientWidth - 2) * this.maxNum);
            this.rangeText.innerText = `￥${minTxt}-${maxTxt}`;
            //滑块颜色的改变
            this.changeRangeSlide();
        }
        changeRangeSlide() {
            //滑块宽度等于左右按钮间的距离
            this.priceRange.style.width = this.rightBtnLeft - this.leftBtnLeft + "px";
            //滑块的left值等于左边按钮的left值
            this.priceRange.style.left = this.leftBtnLeft + "px";
        }
        static setStyles() {
            if (Slide.styleCss) return;
            Slide.styleCss = true;
            Utils.insertCss(".slideContainer", {
                width: "260px",
                height: "70px",
            })
            Utils.insertCss(".priceTxt", {
                fontSize: "17px",
                color: "#666",
                marginBottom: "20px"
            })
            Utils.insertCss(".priceTxt span", {
                float: "right"
            })
            Utils.insertCss(".rangeContainer", {
                width: "260px",
                height: "20px",
                position: "relative",
            })
            Utils.insertCss(".bgRange", {
                width: "240px",
                height: "3px",
                backgroundColor: "#dedede",
                position: "absolute",
                left: "10px",
                top: "9px"
            })
            Utils.insertCss(".priceRange", {
                width: "240px",
                height: "3px",
                background: "#3FB8AF",
                position: "absolute",
                left: "10px",
                top: "9px"
            })
            Utils.insertCss(".rangeContainer span", {
                width: "20px",
                height: "20px",
                borderRadius: "50%",
                border: "1px solid #ccc",
                background: "#fff",
                position: "absolute",
                top: "0px",
                boxShadow: "1px 1px 1px #333"
            })
            Utils.insertCss(".leftBtn", {
                left: "0px"
            })
            Utils.insertCss(".rightBtn", {
                left: "238px"
            })
        }
    }


    //参数为最大范围，不传的话默认是4000
    let slide = new Slide(2000);
    slide.appendTo("sb");

    // var priceSlider = document.getElementById('price-range');
    // noUiSlider.create(priceSlider, {
    //     start: [300, 1000],
    //     connect: true,
    //     range: {
    //         'min': 0,
    //         'max': 2000
    //     }
    // });

    // var minValueElement = document.getElementById('min-value');
    // var maxValueElement = document.getElementById('max-value');
    // var currentValuesElement = document.getElementById('current-values');

    // function updateValues(values) {
    //     minValueElement.textContent = '￥' + parseInt(values[0], 10);
    //     maxValueElement.textContent = '￥' + parseInt(values[1], 10);
    //     // currentValuesElement.textContent = '￥' + values[0] + '-￥' + values[1];
    // }

    // priceSlider.noUiSlider.on('update', function (values, handle) {
    //     updateValues(values);
    // });

    // 生成尺码多选框的函数
    function generateSizeCheckboxes() {
        let container = document.getElementById("size-grid-checkbox");
        for (let i = 35; i <= 49; i++) {
            let checkbox = document.createElement("div");
            checkbox.className = "checkbox";
            checkbox.textContent = i;
            checkbox.addEventListener("click", function () {
                this.classList.toggle("selected");
            });
            container.appendChild(checkbox);
        }
    }
    generateSizeCheckboxes();

    // 动态生成分类多选框
    function renderCategories(shoes) {
        let checkboxesDiv = document.getElementById("category-checkbox");

        let categories = new Set();
        shoes.forEach(shoe => {
            categories.add(shoe.category);
        });
        categories = Array.from(categories);

        categories.forEach((category) => {
            let checkboxDiv = document.createElement("div");
            checkboxDiv.className = "custom-control custom-checkbox";

            let checkboxInput = document.createElement("input");
            checkboxInput.type = "checkbox";
            checkboxInput.id = "category-" + category;
            checkboxInput.name = "category";
            checkboxInput.value = category;
            checkboxInput.classList.add("custom-control-input");

            let checkboxLabel = document.createElement("label");
            checkboxLabel.htmlFor = "category-" + category;
            checkboxLabel.textContent = category;
            checkboxLabel.classList.add("custom-control-label");

            checkboxDiv.appendChild(checkboxInput);
            checkboxDiv.appendChild(checkboxLabel);
            checkboxesDiv.appendChild(checkboxDiv);
        });
    }
    renderCategories(shoeData);

    // 动态生成鞋子卡片
    function renderShoes(shoes) {
        const shoeGrid = document.getElementById('shoeGrid');
        shoeGrid.innerHTML = '';

        shoes.forEach(shoe => {
            const card = document.createElement('div');
            card.className = 'col-md-4 mb-4 shoe-card';
            card.id = `shoe-${shoe.id}`;

            // 新增：颜色条
            const colorBar = document.createElement('div');
            colorBar.className = 'color-bar';
            colorBar.style.backgroundColor = shoe.color; // 假设颜色信息存储在 shoe 对象的 color 属性中
            card.appendChild(colorBar);

            const brand = document.createElement('h6');
            brand.innerText = shoe.brand;
            brand.className = 'brand-title';


            const name = document.createElement('h5');
            name.innerText = shoe.name;
            name.className = 'name-title';

            const img = document.createElement('img');
            img.alt = shoe.name;
            img.src = shoe.image;
            img.className = 'shoe-img';

            const details = document.createElement('div');
            details.className = 'details';

            const priceContainer = document.createElement('div');
            priceContainer.className = 'price-container';

            const priceLabel = document.createElement('span');
            priceLabel.innerText = 'Price';
            priceLabel.className = 'price-label';

            const price = document.createElement('h5');
            price.innerText = `￥${shoe.price}`;
            price.className = 'price';

            const smallImagesContainer = document.createElement('div');
            smallImagesContainer.className = 'small-images-container';

            const leftSmallImage = document.createElement('img');
            leftSmallImage.src = shoe.leftSmallImage;
            leftSmallImage.className = 'small-image';

            const rightSmallImage = document.createElement('img');
            rightSmallImage.src = shoe.rightSmallImage;
            rightSmallImage.className = 'small-image';

            priceContainer.appendChild(priceLabel);
            priceContainer.appendChild(price);

            smallImagesContainer.appendChild(leftSmallImage);
            smallImagesContainer.appendChild(rightSmallImage);

            details.appendChild(priceContainer)
            details.appendChild(smallImagesContainer);

            card.appendChild(brand);
            card.appendChild(name);
            card.appendChild(img);
            card.appendChild(details);

            shoeGrid.appendChild(card);
        });
        document.querySelectorAll('.shoe-card').forEach(function (shoeCard) {
            let images = shoeCard.getElementsByTagName('img');
            for (let i = 0; i < images.length; i++) {
                let img = images[i];
                img.addEventListener('click', function () {
                    document.getElementById('myModal').style.display = "block";
                    document.getElementById("img01").src = this.src;
                });
            }
        });
    }
    filterShoes();

    // 排序
    // const sortSelect = document.querySelector('.form-select');
    // sortSelect.addEventListener('change', function () {
    // const selectedValue = this.value;
    // let sortedShoes = [];

    // switch (selectedValue) {
    //     case 'priceAsc':
    //         sortedShoes = shoeData.slice().sort((a, b) => a.price - b.price);
    //         break;
    //     case 'sizeAsc':
    //         sortedShoes = shoeData.slice().sort((a, b) => a.size - b.size);
    //         break;
    //     case 'category':
    //         sortedShoes = shoeData.slice().sort((a, b) => a.category.localeCompare(b.category));
    //         break;
    //     default:
    //         sortedShoes = shoeData;
    // }

    // renderShoes(sortedShoes);
    //     filterShoes();
    // });

    // 获取下拉菜单中的选项
    document.addEventListener('click', function (event) {
        const dropdown = document.querySelector('.dropdown');
        if (!dropdown.contains(event.target)) {
            // 点击事件不在下拉框内，关闭下拉框
            isSelectedSortExpanded = false;
            dropdownMenu.style.display = 'none';
            selectedSortIcon.classList.remove('fa-caret-up');
            selectedSortIcon.classList.add('fa-caret-down');
        }
    });
    const selectedSort = document.querySelector('.dropdown .btn');
    const dropdownMenu = document.querySelector('.dropdown .dropdown-menu');
    const selectedSortIcon = document.querySelector('.dropdown i');
    let isSelectedSortExpanded = false;
    selectedSort.addEventListener('click', function () {
        isSelectedSortExpanded = !isSelectedSortExpanded;
        if (isSelectedSortExpanded == true) {
            dropdownMenu.style.display = 'block';
            selectedSortIcon.classList.remove('fa-caret-down');
            selectedSortIcon.classList.add('fa-caret-up');
        } else {
            dropdownMenu.style.display = 'none';
            selectedSortIcon.classList.remove('fa-caret-up');
            selectedSortIcon.classList.add('fa-caret-down');
        }

    });

    const sortOptions = document.querySelectorAll('.dropdown .dropdown-item');
    var sortType = 'priceAsc';
    sortOptions.forEach(option => {
        option.addEventListener('click', function (event) {
            event.preventDefault();
            sortType = this.getAttribute('data-sort');
            filterShoes();

            isSelectedSortExpanded = !isSelectedSortExpanded;
            dropdownMenu.style.display = 'none';
            selectedSortIcon.classList.remove('fa-caret-up');
            selectedSortIcon.classList.add('fa-caret-down');
        });
    });

    // 过滤器实现条件查询
    function filterShoes() {

        const selectedCategories = Array.from(document.querySelectorAll('#category-checkbox input:checked'))
            .map(checkbox => checkbox.value);
        const selectedSizes = Array.from(document.querySelectorAll('#size-grid-checkbox .selected'))
            .map(checkbox => parseInt(checkbox.textContent, 10));
        // const priceRange = priceSlider.noUiSlider.get();
        // 获取搜索关键字
        const searchKeyword = document.querySelector('input[type="search"]').value.toLowerCase();

        // 这里假设你已经初始化了 Slide 类，并追加到了页面上，命名为 slide
        const filteredShoes = slide.filterShoes(shoeData);

        // 进行其他过滤条件的判断，例如类别和尺寸
        const finalFilteredShoes = filteredShoes.filter(shoe =>
            (selectedCategories.length === 0 || selectedCategories.includes(shoe.category)) &&
            (selectedSizes.length === 0 || selectedSizes.includes(shoe.size)) &&
            (shoe.name.toLowerCase().includes(searchKeyword) || shoe.brand.toLowerCase().includes(searchKeyword))
        );

        // 进行排序
        if (sortType !== 'default') {
            finalFilteredShoes.sort((a, b) => {
                switch (sortType) {
                    case 'priceAsc':
                        return a.price - b.price;
                    case 'sizeAsc':
                        return a.size - b.size;
                    case 'brand':
                        return a.brand.localeCompare(b.brand);
                    default:
                        return 0;
                }
            });
        }

        if (finalFilteredShoes.length === 0) {
            document.getElementById('noResultsMessage').style.display = 'block';
        } else {
            document.getElementById('noResultsMessage').style.display = 'none';
        }

        renderShoes(finalFilteredShoes);
    }

    // 添加事件监听器
    // document.getElementById('price-range').noUiSlider.on('change', filterShoes);

    const categoryCheckboxes = document.querySelectorAll('#category-checkbox input');
    categoryCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', filterShoes);
    });

    const sizeCheckboxes = document.querySelectorAll('#size-grid-checkbox .checkbox');
    sizeCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('click', filterShoes);
    });

    // 获取分类标签和多选框区域
    const categoryHeader = document.getElementById('category-header');
    const categoryCheckbox = document.getElementById('category-checkbox');
    const categoryCheckboxHr = document.getElementById('category-checkbox-hr');
    const categoryIcon = document.getElementById('category-icon');

    let isCategoryExpanded = true;

    // 分类标签收缩
    categoryHeader.addEventListener('click', function () {

        isCategoryExpanded = !isCategoryExpanded;

        if (isCategoryExpanded) {
            categoryCheckbox.style.display = 'block';
            categoryCheckboxHr.style.display = 'block';
            categoryIcon.classList.remove('fa-caret-down');
            categoryIcon.classList.add('fa-caret-up');
        } else {
            categoryCheckbox.style.display = 'none';
            categoryCheckboxHr.style.display = 'none';
            categoryIcon.classList.remove('fa-caret-up');
            categoryIcon.classList.add('fa-caret-down');
        }
    });

    // 搜索按钮事件监听器
    document.querySelector('form').addEventListener('submit', function (event) {
        event.preventDefault();
        filterShoes();
    });
    // 搜索按钮事件监听器
    document.querySelector('input[type="search"]').addEventListener('input', function (event) {
        filterShoes();
    });


</script>
</body>

</html>